<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/icon.css">
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script>
			function showLine(obj){
				var chart = Highcharts.chart('container', {
					chart: {
						type: 'line'
					},
					title: {
						text: '企业资质数量走势图'
					},
					subtitle: {
						text: '数据来源: 测试库和线上'
					},
					xAxis: {
						//categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
						categories:obj.categories
					},
					yAxis: {
						title: {
							text: '原表计数'
						}
					},
					plotOptions: {
						line: {
							dataLabels: {
								// 开启数据标签
								enabled: true          
							},
							// 关闭鼠标跟踪，对应的提示框、点击事件会失效
							enableMouseTracking: false
						}
					},
					series: [{
						name: '测试库企业证书',
						//data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
						data:obj.testData
					}, {
						name: '线上库企业证书',
						data:obj.onLineData
					}]
				});
			}
			
			window.onload = function(){
				var endDate = new Date();
				//10表示日期范围10天
				var startDate = new Date(endDate.getTime() - 10*24*60*60*1000);
				var endDateDay = endDate.getFullYear()+'-'+(endDate.getMonth()+1)+'-'+endDate.getDate()
				var startDateDay  = startDate.getFullYear()+'-'+(startDate.getMonth()+1)+'-'+startDate.getDate()
				
			
				$('#start_date').datebox('setValue',startDateDay);
				
				$('#end_date').datebox('setValue',endDateDay);
				
				$('#cert_type').combotree({    
					url: '/testLib/companyCertChange/getDictCompanyQualifiList',    
					required: true,
					onClick:function(node){
						//console.log(node);
						$.post("/testLib/companyCertChange/getData",{
							cert_type:node.text,
							start_date:$('#start_date').datebox('getValue'),
							end_date:$('#end_date').datebox('getValue')
						},function(response){
							response = JSON.parse(response)
							console.log(response)
							showLine(response)
						})
					}
				});
			
			
				//showLine({});
			}
		
		
		</script>
		
		
    </head>
    <body  class="easyui-layout" >
	<div region="center" border="false">
		<div region="north" border="false"   style="width:100%;height:80px;margin-top: 20px;">
			<form id ="search_form" method="post" class="easyui-form">
				<table width="100%">
					<tr>
						<td align="right" width="5%">证书类别:</td>
						<td width="15%"  align="left" >
							<select id="cert_type" class="easyui-combotree" style="width:400px;" ></select>
						</td>
						<td align="right" width="5%">日期范围:</td>
						<td width="15%"  align="left" >
							<input class="easyui-datebox" id ="start_date"  name="start_date" style="width:200px"  />
							--->
							<input class="easyui-datebox" id ="end_date"  name="end_date" style="width:200px"  />
						</td>
						<td width="15%" ></td>
					</tr>
				</table>
			</form>
		
		
		</div>
		
	
		<div region="center" border="false">
			<div id="container" style="min-width:400px;height:900px"></div>
			
		</div>
    </body>
</html>